<template>
  <div id="map" class="container"></div>
</template>

<script>
import {onMounted} from "vue";
import MapLayerConst from "@/const/MapLayerConst"
import MaptalksUtil from "@/utils/Maptalks.util"

export default {
  name: "Maptalks.component",
  props: {
    mapOnLoadCB: {
      required: false,
      type: Function,
      default: () => {
      }
    }
  },
  setup(props) {

    onMounted(() => {
      let map = new maptalks.Map("map", {
        center: window.$config.center,
        zoom: window.$config.zoom,
        minZoom: window.$config.minZoom,
        maxZoom: window.$config.maxZoom,
        baseLayer: new maptalks.TileLayer(MapLayerConst.MAP_BASE_LAYER, Object.assign({
          cssFilter: window.$config.theme.default
        }, window.$config.baseLayerOptions)),
      })

      props.mapOnLoadCB(map, new MaptalksUtil(map));
    })
  }
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;

  /deep/ .maptalks-control {
    display: none;
  }
}
</style>
